<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    姓名<input id="username" type="text"><br>
    科目<input id="subject" type="text"><br>
    成绩<input id="score" type="text"><br>
    <button id="insert-btn">添加</button>
    <table>
        <thead>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </thead>
        <tbody>
            <!-- <tr>
                <td>张三</td>
                <td>JVASDSADDAS</td>
                <td>100</td>
                <td>
                    <button class="remove-btn">删除</button>
                </td>
            </tr> -->
        </tbody>
    </table>

    <script>

        var username = document.querySelector('#username');
        var subject = document.querySelector('#subject');
        var score = document.querySelector('#score');
        var insertBtn = document.querySelector('#insert-btn');
        var tbody = document.querySelector('tbody');

        // 添加事件函数
        function onInsert() {

            // 生成tr
            var tr = document.createElement('tr');
            // 把tr加到tbody中
            tbody.appendChild(tr);

            // 生成姓名td
            var usernameTd = document.createElement('td');
            usernameTd.innerText = username.value.trim();
            // 把姓名td加到tr中
            tr.appendChild(usernameTd);

            // 生成科目td
            var subjectTd = document.createElement('td');
            subjectTd.innerText = subject.value.trim();
            // 把科目td加到tr中
            tr.appendChild(subjectTd);

            // 生成成绩td
            var scoreTd = document.createElement('td');
            scoreTd.innerText = score.value.trim();
            // 把成绩td加到tr中
            tr.appendChild(scoreTd);

            // 生成删除td
            var removeTd = document.createElement('td');
            // 生成删除按钮
            var removeBtn = document.createElement('button');
            removeBtn.setAttribute('class', 'remove-btn');
            removeBtn.innerText = '删除';
            // 把删除按钮加到td中
            removeTd.appendChild(removeBtn);
            // 把删除td加到tr中
            tr.appendChild(removeTd);

            // 给删除按钮添加点击事件
            removeBtn.addEventListener('click', function () {
                tr.remove();
            });

            // 清空input
            username.value = '';
            subject.value = '';
            score.value = '';

        }

        // 给新增按钮添加事件
        insertBtn.addEventListener('click', onInsert);

    </script>
</body>
</html>